<template>
	<div>
		<van-nav-bar size="large" title="系统名称啊啊啊" left-text="返回" left-arrow @click-left="onClickLeft" />
		<router-view v-slot="{ Component }">
			<keep-alive>
				<component :is="Component" v-if="$route.meta.keepAlive"></component>
			</keep-alive>
			<component :is="Component" v-if="!$route.meta.keepAlive"></component>
		</router-view>
		<van-tabbar route id="nav_bottom">
			<van-row justify="space-between">
				<van-col span="6">
					<van-tabbar-item replace to="/">
						<van-icon name="home-o" size="40"></van-icon>
					</van-tabbar-item>
				</van-col>
				<van-col span="6">
					<van-tabbar-item replace to="/top">
						<van-icon name="chat-o" size="40"></van-icon>
					</van-tabbar-item>
				</van-col>
				<van-col span="6">
					<van-tabbar-item replace to="/next">
						<van-icon name="cart-o" size="40"></van-icon>
					</van-tabbar-item>
				</van-col>
				<van-col span="6">
					<van-tabbar-item replace to="/setting">
						<van-icon name="fire-o" size="40"></van-icon>
					</van-tabbar-item>
				</van-col>
			</van-row>
		</van-tabbar>
	</div>

</template>

<script lang="ts">
export default {
	setup() {
		const onClickLeft = () => history.back();
		return {
			onClickLeft,
		};
	},
};
</script>
<style lang="scss">
#nav_bottom {
	padding: 80px;
}

</style>